<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<table>
    <caption>商品列表</caption>
    <tr>
        <th>商品标题</th>
        <th>商品价格</th>
        <th>商品销量</th>
    </tr>
</table>
<script>
    //如何实例化对象  空对象
    let p1 = {};
    //动态给实例化完成的对象添加属性和方法
    p1.name = "张三";
    p1.age = 24;
    p1.run = function () {
        console.log(this.name + ":" + this.age);
    }
    //调用对象的方法
    p1.run();


    //实例化自带属性和方法的对象
    let p2 = {
        name: "李四",
        age: 18,
        run: function () {
            console.log(this.name + ":" + this.age);
        }
    }
    p2.run();


    //通过数组对象的方式封装   列表数据
    let arr = [{title: "小米手机", price: 4000, saleCount: 200},
        {title: "华为手机", price: 5000, saleCount: 300},
        {title: "苹果手机", price: 6000, saleCount: 400}
    ]
    //遍历数组  把数据展示到页面中
    for (let product of arr) {
        //创建行
        let tr = document.createElement("tr");
        let titleTd = document.createElement("td");
        let priceTd = document.createElement("td");
        let saleCountTd = document.createElement("td");
        titleTd.innerText = product.title;
        priceTd.innerText = product.price;
        saleCountTd.innerText = product.saleCount;
        //把三个td装进tr
        tr.append(titleTd, priceTd, saleCountTd);
        //把tr装进table
        let table = document.querySelector("table");
        table.append(tr);
    }
</script>
</body>
</html>